<template>
	<view class="help-pay-page">

		<!-- 发起者信息 -->
		<view class="initiator-info">
			<image class="avatar" src="@/static/hua.png" mode="cover"></image>
			<view class="info-box">
				<text class="nickname">周行天下</text>
				<text class="message">周行天下挑了喜欢的宝贝，请你帮我付个款吧～谢啦</text>
			</view>
		</view>

		<!-- 付款信息卡片 -->
		<view class="pay-card">
			<view class="card-header">付款信息</view>
			<view class="amount">¥<text class="price">100.00</text></view>
			<text class="amount-tip">实际金额以付款人确认时付款为准</text>
			<view class="goods-item">
				<image class="goods-img" src="@/static/hua.png" mode="aspectFill"></image>
				<view class="goods-info">
					<text class="goods-name">高效全套洗涤套装</text>
					<text class="goods-count">×1</text>
				</view>
			</view>

			<view class="goods-item">
				<image class="goods-img" src="@/static/hua.png" mode="aspectFill"></image>
				<view class="goods-info">
					<text class="goods-name">高效全套洗涤套装</text>
					<text class="goods-count">×1</text>
				</view>
			</view>

		</view>

		<!-- 帮付说明 -->
		<view class="instruction">
			<text class="instruction-title">帮我付说明</text>
			<view class="instruction-list">
				<text class="item">1.代付产品是为了便利亲友之间的付款而设计，您应在国家法规政策允许的范围内使用代付产品。付款前请您务必和亲友再次确认，避免遇到诈骗行为。</text>
				<text class="item">2.如果发生退款，已支付金额将原路退回付款人。</text>
				<text class="item">3.付款金额以当前页面展示为准。</text>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-btn" :class="{ disabled: isOrderClosed }">
			<text class="btn-text">{{ isOrderClosed ? '该笔订单已关闭' : '确认帮付' }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isOrderClosed: false, // 控制按钮状态，实际需从接口获取
				orderData: {},
				order_type: 0,

			};
		},
		onLoad(e) {
			this.orderId = e.orderId
			if (e.order_type) {
				this.order_type = e.order_type;
			}

		},

		methods: {
			goBack() {
				uni.navigateBack();
			},
			handlePay() {
				if (this.isOrderClosed) return;
				// 发起帮付逻辑（调用支付接口）
				uni.showModal({
					title: '提示',
					content: '确认帮朋友支付100元吗？',
					success: (res) => {
						if (res.confirm) {
							// 模拟支付请求
							uni.request({
								url: '/api/pay/helpPay',
								method: 'POST',
								data: {
									orderId: 'xxx'
								},
								success: (res) => {
									if (res.data.code === 200) {
										uni.showToast({
											title: '支付成功',
											icon: 'success'
										});
									} else {
										uni.showToast({
											title: res.data.msg,
											icon: 'none'
										});
									}
								}
							});
						}
					}
				});
			}
		}
	};
</script>

<style scoped>
	/* 基础样式重置 */
	page {
		background: #fff;
	}

	.help-pay-page {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	/* 导航栏 */
	.nav-bar {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #eee;
		background: #fff;
		position: sticky;
		top: 0;
		z-index: 99;
	}

	.nav-left,
	.nav-right {
		width: 44rpx;
		height: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.iconfont {
		font-size: 32rpx;
		color: #333;
	}

	.nav-title {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}

	/* 发起者信息 */
	.initiator-info {
		display: flex;
		align-items: flex-start;
		padding: 30rpx;
		background: #fef2f0;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.info-box {
		flex: 1;
	}

	.nickname {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}

	.message {
		font-size: 28rpx;
		color: #666;
		line-height: 1.5;
	}

	/* 付款信息卡片 */
	.pay-card {
		background: linear-gradient(135deg, #ff7a5a, #ff5252);
		border-radius: 16rpx;
		padding: 30rpx;
		margin: 20rpx 30rpx 30rpx;
		color: #fff;

	}

	.card-header {
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}

	.amount {
		font-size: 80rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.price {
		font-size: 100rpx;
	}

	.amount-tip {
		font-size: 24rpx;
		opacity: 0.8;
		display: block;
		margin-bottom: 30rpx;
	}

	.goods-item {
		display: flex;
		align-items: center;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 10rpx;
	}

	.goods-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.goods-info {
		flex: 1;
	}

	.goods-name {
		font-size: 30rpx;
		display: block;
		margin-bottom: 10rpx;
	}

	.goods-count {
		font-size: 26rpx;
		opacity: 0.8;
	}

	/* 帮付说明 */
	.instruction {
		padding: 30rpx;
		margin-bottom: 40rpx;
	}

	.instruction-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		display: block;
		margin-bottom: 20rpx;
	}

	.instruction-list {
		font-size: 26rpx;
		color: #999;
		line-height: 1.8;
	}

	.item {
		display: block;
		margin-bottom: 20rpx;
	}

	.item:last-child {
		margin-bottom: 0;
	}

	/* 底部按钮 */
	.bottom-btn {
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 34rpx;
		border-radius: 49rpx;
		margin: 0 30rpx 40rpx;
	}

	.bottom-btn:not(.disabled) {
		background: #ff5252;
		color: #fff;
		cursor: pointer;
	}

	.bottom-btn:not(.disabled):active {
		opacity: 0.8;
	}

	.disabled {
		background: #f5f5f5;
		color: #ccc;
	}

	.btn-text {
		display: block;
		width: 100%;
		height: 100%;
	}
</style>